<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 每 3600 秒自动刷新网页一次 -->
    <meta http-equiv="refresh" content="3600" charset="UTF-8">
    <title id="title-meta"></title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/now2.css}">
    <link rel="stylesheet" th:href="@{/css/keyboard.css}">
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">
    <div th:insert="main :: common_head"></div>
    <style>
        /*@media screen and (min-height: 750px) and (max-height: 820px){*/
        /*    .form_content>img{*/
        /*        width: 85%!important;*/
        /*    }*/
        /*}*/

        .tabs {
            width: 100%;
            max-width: 1000px;
            margin: 10px auto;
        }

        .tabs>input {
            opacity: 0;
        }

        .tabs>label {
            cursor: pointer;
            background: #073598;
            color: #eee;
            border-radius: 20px 20px 20px 20px;
            padding: 1% 2%;
            float: left;
            margin-right: 2px;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
            text-align: center;
            z-index: 99;
        }

        .tabs>label:hover {
            background: #073598;
            color: #fff;
        }

        .tabs>input:checked+label {
            background: #056caa;
            ;
            color: #fff;
            margin-left: 0px;
        }

        .tabs input:nth-of-type(1):checked~.panels .panel:first-child,
        .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2) {
            opacity: 1;
            -webkit-transition: .3s;
        }

        .panels {
            float: left;
            /*clear: both;*/
            position: relative;
            width: 100%;
            border-radius: 0 10px 10px 10px;
            min-height: 650px;
            margin-top: -50px;
        }

        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            border-radius: 0 10px 10px 10px;
            box-sizing: border-box;
            height: 650px;
            margin-top: -50px;
            /*border:1px solid red;*/
            padding: 0px;
        }

        .gongkuang>div {
            width: 100%;
            margin-left: 0px;
            margin-top: 10px;
        }

        .gongkuang>div>div {
            width: 90%;
            margin-left: 0px;
        }

        .gongkuang>div>img {
            margin-right: 0px;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="row-fluid">
        <div id="app">
            <div id="content" class="span10">
                <div class="left">
                    <div class="left-top content-block1">
                        <div class="content-title">
                            <img class="content-title-pic" th:src="@{/img/view-titleCircle.png}" alt="">
                            <div class="content-title-word">影响因素</div>
                        </div>
                        <div style="display: flex;flex-direction: column;height: 170px;width: 100%;justify-content: space-evenly">
                            <div style="display: flex;justify-content: space-evenly;">
                                <div class="form_content" id="form_content1">
                                    <img th:src="@{/img/view2-temperature.png}">
                                    <p class="form_content-p1">温度</p>
                                    <p class="form_content-p2" id="form_content1-p2"><span v-text="temperature"></span>&#8451</p>
    <!--                                <p class="form_content-p3">&#8451</p>-->
                                </div>
                                <div class="form_content" id="form_content2">
                                    <img th:src="@{/img/view2-weather.png}">
                                    <p class="form_content-p1">人数</p>
                                    <p class="form_content-p2" id="form_content2-p2"><span v-text="peopleNumber"></span></p>
                                </div>
                            </div>
                            <div style="display: flex;justify-content: space-evenly">
                                <div class="form_content" id="form_content3">
                                    <img th:src="@{/img/view2-peopleNum.png}">
                                    <p class="form_content-p1">天气</p>
                                    <p class="form_content-p2" id="form_content3-p2"><span v-text="weather"></span></p>
                                </div>
                                <div class="form_content" id="form_content4">
                                    <img th:src="@{/img/view2-humidity.png}">
                                    <p class="form_content-p1">湿度</p>
                                    <p class="form_content-p2" id="form_content4-p2"><span v-text="humidity"></span>%</p>
    <!--                                <p class="form_content-p3">%</p>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left-mid content-block">
                        <div class="content-title">
                            <img class="content-title-pic" th:src="@{/img/view-titleCircle.png}" alt="">
                            <div class="content-title-word">小时能量预测</div>
                        </div>
                        <div id="hotChart"></div>
                    </div>
                    <div class="left-bottom content-block">
                        <div class="content-title">
                            <img class="content-title-pic" th:src="@{/img/view-titleCircle.png}" alt="">
                            <div class="content-title-word">小时电度预测</div>
                        </div>
                        <div id="eleChart"></div>
                    </div>
                </div>
                <div class="right">
                    <div class="right-top content-block1" id="tupu">
                        <div class="content-title">
                            <img class="content-title-pic" th:src="@{/img/view-titleCircle.png}" alt="">
                            <div class="content-title-word">知识图谱图</div>
                        </div>
                        <!--        知识图谱开始-->
                        <div style="position: relative; width: 90%;height: 90%;" id="knowChart">
                            <div id="loadingDiv" style="position: absolute;top:10%;left:50%">
                                <img style="width: 30px;height: 30px;" th:src="@{/img2/loadding.gif}" alt="">
                            </div>
                        </div>
                        <!--        知识图谱结束-->
                    </div>
                    <div class="right-bottom content-block">
                        <div class="content-title">
                            <img class="content-title-pic" th:src="@{/img/view-titleCircle.png}" alt="">
                            <div class="content-title-word">策略建议</div>
                        </div>
                        <div class="gongkuang"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>

    <script>

        let getNumParam = val => { return isNumber(val) ? val : "" }
        var vm = new Vue({
            el:"#app",
            created(){
                if(getNumParam(getPathParamAferSlashLast())!=""){
                    this.getInfluWithAru();
                }else {
                    this.getInfluNoAru();
                }
            },
            data:{
                temperature: 36,
                weather: '晴',
                humidity: 23,
                peopleNumber: 300
            },
            methods:{
                getInfluNoAru:function () {
                    that = this;
                    $.ajax({
                        type:'GET',
                        url:"/multipower/weather/getWeatherDataHourly",
                        success: function (data) {
                            if(data.status==200) {
                                that.temperature = data.data.dayTMax;
                                if(data.data.dayWeather==0){
                                    that.weather = '晴';
                                }else if(data.data.dayWeather==1){
                                    that.weather = '云';
                                }else if(data.data.dayWeather==2){
                                    that.weather = '阴/霾';
                                }else if(data.data.dayWeather==3){
                                    that.weather = '雨/雪';
                                };
                                that.humidity = data.data.dayHumMax;
                            }else{
                                layer.alert('影响因素数据获取失败!可能该时间没有数据', {
                                    icon: 5,
                                    title: "失败"
                                });
                            }
                        }
                    })
                },
                getInfluWithAru:function () {
                    that = this;
                    $.ajax({
                        type:'GET',
                        url:"/multipower/weather/getWeatherDataHourly/"+getNumParam(getPathParamAferSlashLast()),
                        // data:{date:getNumParam(getPathParamAferSlashLast())},
                        success: function (data) {
                            if(data.status==200) {
                                that.temperature = data.data.dayTMax;
                                if(data.data.dayWeather==0){
                                    that.weather = '晴';
                                }else if(data.data.dayWeather==1){
                                    that.weather = '云';
                                }else if(data.data.dayWeather==2){
                                    that.weather = '阴/霾';
                                }else if(data.data.dayWeather==3){
                                    that.weather = '雨/雪';
                                };
                                that.humidity = data.data.dayHumMax;
                            }else{
                                layer.alert('影响因素数据获取失败!可能该时间没有数据', {
                                    icon: 5,
                                    title: "失败"
                                });
                            }
                        }
                    })
                }
            }
        })
        $(function () {
            $.ajax({
                type: "GET",
                url: "/multipower/strategyJL/getViewAtlas?date=" + getNumParam(getPathParamAferSlashLast()),
                dataType: "json",
                async: false,
                success: function (data) {
                    drawEleChart(data.graphId);
                }
            });
            // draw();
            //drawEleChart();
            getNodeAndLine();
        })
        var eleChart = echarts.init(document.getElementById('eleChart')); //电量图
        var hotChart = echarts.init(document.getElementById('hotChart')); //能量图
        var mychart = echarts.init(document.getElementById("knowChart")); //知识图谱
        function drawEleChart(graphId) { //电量，冷热量折线图
            $.ajax({
                type: "GET",
                //默认stgyType为1001，后端会根据graphId去graph info表中获取对应的 strategy_type 值
                url: "/multipower/strategyJL/predict_data/" + graphId + "?date=" + getNumParam(getPathParamAferSlashLast()) + "&&stgyType=1001",
                dataType: "json",
                async: true,
                success: function (data) {
                    if (eleChart != null && eleChart != "" && eleChart != undefined) {
                        eleChart.dispose();
                    }
                    if (hotChart != null && hotChart != "" && hotChart != undefined) {
                        hotChart.dispose();
                    }
                    var arrEle = data.electricity;
                    var arrHot = data.power;
                    var sumEle = 0;
                    var sumHot = 0;
                    for (var j = 0; j < arrHot.length; j++) {
                        sumHot = sumHot + Number(arrHot[j]); //计算总能量
                    }
                    for (var i = 0; i < arrEle.length; i++) {
                        sumEle = sumEle + Number(arrEle[i]); //计算总电量
                    }
                    option2.title[0].text = "今日能量:" + Number(sumHot).toFixed(0) + "kWh";
                    hotChart = echarts.init(document.getElementById('hotChart'));
                    option2.series[0].data = arrHot;
                    hotChart.setOption(option2);
                    option1.title[0].text = "今日电度:" + Number(sumEle).toFixed(0) + "kWh";
                    eleChart = echarts.init(document.getElementById('eleChart'));
                    option1.series[0].data = arrEle;
                    eleChart.setOption(option1);
                },
                error: function () {
                    layer.alert('预测数据获取失败!', {
                        icon: 5,
                        title: "失败"
                    });
                }
            })
        }

        function getNodeAndLine() {
            $.ajax({
                type: "GET",
                url: "/multipower/strategyJL/getViewAtlas?date=" + getNumParam(getPathParamAferSlashLast()),
                dataType: "json",
                async: false,
                success: function (data) {
                    var node = data.node;
                    var edge = data.edge;
                    var nodeLength = data.node.length; // 节点的长度
                    var edgeLength = data.edge.length; // 边的长度
                    var nodeObject = { //节点对象
                        "name": "设备",
                        desc: "8", //描述，对应节点的id
                        // "value": [200, 80], //节点的坐标
                        "value": [0, 0], //节点的坐标
                        symbolSize: [60, 80],
                        selected: true,
                        // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                        // symbol:'none'
                        symbol: 'circle',
                        itemStyle: {
                            color: '#fff'
                        }
                    };
                    line_direction_option.series[0].data = node.map(function (item, index) {
                        return {
                            name: item.deviceName, //设备名称
                            desc: item.deviceId.toString(), // 设备id
                            value: item.coordinate, //设备坐标
                            symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath, //设备图片
                            symbolSize: [60, 60], //节点的大小
                            selected: true,
                            itemStyle: {
                                color: '#fff'
                            }
                        }
                    })
                    line_direction_option.series[1].data = edge.map(function (item) {
                        return {
                            name: "", //边标签上显示的文字
                            coords: item.line, //边的坐标
                            desc: item.desc, //边的描述，例如:3#10,3为起始节点id，10为终止节点id
                            effect: {
                                show: false,
                                trailLength: 0,
                                //边上图标的大小
                                symbolSize: [30, 30],
                                symbol: 'none'
                                // symbol:'image://img/sun.png'
                            },
                        }
                    })
                    $.ajax({
                        type: "GET",
                        url: "/multipower/strategy/gen?date=" + getNumParam(getPathParamAferSlashLast()),
                        dataType: "json",
                        async: true,
                        beforeSend: function () {
                            // $.blockUI();//请求之前打开
                            $.blockUI({
                                message: '<h1>请等待...</h1>'
                            });
                        },
                        success: function (data) {
                            $.unblockUI(); //返回关闭
                            var edgeHigh1 = data.path; //高亮边
                            var path2 = 'image://img/littlesun.png';
                            if (data.path != undefined && data.path.length > 0
                                && data.node != undefined && data.node.length > 0
                                && data.strategyOutput != undefined && data.strategyOutput.length > 0) { //运行成功
                                var nodeHigh = []; //保存高亮节点数组
                                var edgeHigh = []; //保存高亮边数组
                                var nodeHigh1 = data.node;
                                var arr = data.strategyOutput; //工况数组
                                //动态生成工况开始
                                var gongkuang1 = document.getElementsByClassName("gongkuang")[0];
                                gongkuang1.innerHTML = '';
                                for (var i = 0; i < arr.length; i++) { //动态表里工况数组，成功工况
                                    var newdiv = document.createElement("div");
                                    var newimg = document.createElement("img");
                                    newimg.setAttribute("src", "/multipower/img2/computer.png");
                                    newdiv.appendChild(newimg);
                                    var newdiv1 = document.createElement("div");
                                    var newspan = document.createElement("span");
                                    newspan.innerHTML = arr[i].infoTime + "&emsp;&emsp;&nbsp" + arr[i].infoContent;
                                    newdiv.appendChild(newspan);
                                    newdiv.appendChild(newdiv1);
                                    var gongkuang = document.getElementsByClassName("gongkuang")[0];
                                    gongkuang.appendChild(newdiv);
                                }
                                //遍历节点对象，将对象转为数组。
                                for (var index1 = 0; index1 < nodeHigh1.length; index1++) {
                                    nodeHigh.push(nodeHigh1[index1]);
                                }
                                //遍历边对象，将对象转为数组。
                                for (var index2 = 0; index2 < edgeHigh1.length; index2++) {
                                    edgeHigh.push(edgeHigh1[index2]);
                                }
                                for (var i = 0; i < nodeLength; i++) { //节点高亮
                                    for (var j = 0; j < nodeHigh.length; j++) {
                                        if (nodeHigh[j] == node[i].deviceId) {
                                            //如果id相同则通过id查询高亮图片，高亮。
                                            $.ajax({
                                                type: "GET",
                                                url: "/multipower/strategyJL/getHighlightPic/" + node[i].deviceId,
                                                dataType: "json",
                                                async: false,
                                                success: function (data) {
                                                    line_direction_option.series[0].data[i].symbol = "image://" + data.highlight;
                                                }
                                            })
                                        }
                                    }
                                }
                                for (var i = 0; i < edgeLength; i++) { //边高亮
                                    for (var j = 0; j < edgeHigh.length; j++) {
                                        if (edgeHigh[j] == edge[i].desc) { //如果关系名称相同则边高亮。
                                            // line_direction_option.series[1].data[i].effect.symbol="image://"+edge[i].icon;
                                            line_direction_option.series[1].data[i].effect.symbol = "image://" + edge[i].energyPic;
                                        }
                                    }
                                }

                                $("#loadingDiv").parent().remove();
                                mychart.setOption(line_direction_option);

                            } else {
                                mychart.setOption(line_direction_option);
                                layer.alert('没有预测数据/策略', {
                                    icon: 5,
                                    title: "提示"
                                });
                                return false;
                            }
                        },
                        error: function (data) {
                            $.unblockUI(); //返回关闭
                            mychart.setOption(line_direction_option);
                            layer.alert('策略生成异常，请稍后再试！', {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
            })
        }

        // 知识图谱对象配置
        var line_direction_option = {
            title: { //标题
                // text: '夏季能源知识图谱',
                left: '-5',
                top: '10px',
                textStyle: {
                    color: '#ffffff',
                    fontFamily: '微软雅黑',
                    fontWeight: 'lighter',
                    fontSize: 18
                },
            },
            // // 提示框的配置
            // tooltip: {
            //     trigger: 'item',
            //     formatter: "名称:{b0}" + "<br>" +
            //         "坐标值:" + "[" + "{c0}" + "]",
            // },

            xAxis: { //X轴的设置
                type: 'value',
                boundaryGap: false,
                show: false
            },
            yAxis: { //Y轴的设置
                type: 'value',
                show: false,
                inverse: true,
            },
            series: [{ //节点
                type: 'graph',
                layout: 'none',
                // silent: true,          //不响应鼠标事件
                coordinateSystem: 'cartesian2d',
                symbolSize: 20,
                showEffectOn: 'render',
                zlevel: 2,
                rippleEffect: {
                    period: 3, //波纹秒数
                    brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                    scale: 10 //波纹范围
                },
                hoverAnimation: true,

                label: {
                    normal: {
                        show: true,
                        position: 'bottom', //设置label显示的位置
                        // formatter: '{c}',//设置label读取的值为value
                        textStyle: {
                            fontSize: '15'
                        },
                    }
                },
                data: []
            },

            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 15,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',

                        width: 3,
                        opacity: 0.5,
                        curveness: 0,

                    }
                },
                effect: {
                    show: true,
                    // smooth: false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
            ],

        }
        var option1 = {
            title: [{
                text:"明日电量",
                textStyle: {
                    color: "#fff",
                    fontSize: 16,
                },
                x: 'center',
                y: 'top'
            }],
            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show:false
                },
                axisLabel: {
                    // inside: true,
                    color: '#092139',
                    textStyle: {
                        color: "#04dff9" //X轴文字颜色
                    },
                    interval: 1
                },
                axisTick: {
                    show: false
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                // boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                nameTextStyle:{
                    color:"#04dff9",
                },
                type: 'value',
                splitLine:{
                    lineStyle:{
                        //这里输入线条的样式
                        color:'#0d253d',
                    }
                },
                axisLine: {
                    show:false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#04dff9'
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [{
                name: '电度',
                data: [],
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                    }
                },
            }],
            // color: ['#eeb151']
        };
        var option2 = {

            title: [{
                text: "明日能量",
                textStyle: {
                    color: "#fff",
                    fontSize: 16,
                },
                x: 'center',
                y:'top',
            }],
            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show:false
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    textStyle: {
                        color: "#04dff9" //X轴文字颜色
                    },
                    color: '#092139',
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                axisTick: {
                    show: false
                },
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                nameTextStyle:{
                    color:"#04dff9",
                },
                type: 'value',
                splitLine:{
                    lineStyle:{
                        color:'#0d253d',
                    }
                },
                axisLine: {
                    show:false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#04dff9'
                }
            },

            series: [{
                name: '能量',
                data: [],
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#35ee86' },
                        { offset: 0.5, color: '#208f65' },
                        { offset: 1, color: '#0e393f' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#0e393f' },
                            { offset: 0.7, color: '#208f65' },
                            { offset: 1, color: '#35ee86' }
                        ])
                    }
                },
            }],
        };
        window.addEventListener("resize", function () {
            mychart.resize();
            eleChart.resize();
            hotChart.resize();
        });
    </script>
</body>

</html>